<style lang="scss" scoped>
.inp-app {
  width: 100%;
  height: 28vh;
  // background-color: aqua;
  position: relative;

  &::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(#46bf82, #fff);
    z-index: 3;
  }
}

.inp-app-top {
  z-index: 100;
  width: 100%;
  height: 100%;
  // background-color: antiquewhite;
  position: absolute;
  top: 0;
  left: 0;
  // display: flex;
}

.inp-app-top-search {
  margin-top: 0.3rem;
  width: 85%;
  height: 80%;
  background-color: #fff;
  border-radius: 1.2rem;
  display: flex;

  input {
    flex: 0.7;
    border: none;
    height: 99%;
    font-size: 0.9rem;
  }

  button {
    flex: 0.2;
    border-radius: 1.2rem;
    border: none;
    background-color: #46bf82;
    color: #fff;
    height: 93%;
    // margin: .1rem .1rem;
    margin: 0.5%;
    font-size: 0.9rem;
  }
}

.ul-1 {
  width: 100%;
  height: 50%;

  // background-color: red;
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    font-size: 0.8rem;

    li {
      width: 20%;
      margin-top: 0.5rem;

      img {
        width: 50%;
        height: 60%;
      }
    }
  }
}

.Consultation {
  width: 100%;
  height: 10vh;
  // background-color: red;
  margin-top: 0.5rem;
}

.Consultation-top {
  width: 90%;
  height: 100%;
  background: linear-gradient(#b7e2cc, #fff);
  border-radius: 0.5rem;
  display: flex;
  font-size: 0.8rem;

  p {
    color: #666;
    font-size: 0.7rem;
  }

  button {
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    border: none;
    color: #fff;
    background-color: #39d167;
    margin-top: 30%;
  }
}

.Consultation-top-left {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.4rem;

  img {
    width: 0.5rem;
  }
}

.SkList {
  width: 100%;
  height: 25vh;
  display: flex;
  padding: 0.4rem;
  background-color: #f2f2f2;

  div {
    padding: 0.1rem;
  }

  img {
    width: 100%;
    height: 100%;
  }
}

.footer {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  background-color: #ff7f2f;
  border-radius: 50%;
  text-align: center;
}
</style>
<template>
  <div>
    <!-- <p class="shopping">商城</p> -->
    <!-- 头部 -->
    <van-sticky>
      <div class="header">
        <div class="search">
          <van-search class="search2" @click="search" />
          <div class="lun">
            <van-notice-bar :scrollable="false" class="notice">
              <van-swipe
                vertical
                class="notice-swipe"
                :autoplay="3000"
                :touchable="false"
                :show-indicators="false"
              >
                <van-swipe-item>布洛芬缓释胶囊</van-swipe-item>
                <van-swipe-item>炉甘石洗剂</van-swipe-item>
                <van-swipe-item>夫西地酸乳膏</van-swipe-item>
                <van-swipe-item>糠酸莫米松乳膏</van-swipe-item>
                <van-swipe-item>碌雷他定片</van-swipe-item>
              </van-swipe>
            </van-notice-bar>
          </div>
        </div>
        <button class="btn" @click="search">搜索</button>
        <van-icon name="service-o" class="icon" />
      </div>
    </van-sticky>
    <!-- 宫格 -->
    <div class="grid-container">
      <div class="grid" @click="skin">
        <img src="../../img/1_03.jpg" alt="" class="img" />
        <p class="title">皮肤用药</p>
      </div>
      <div class="grid" @click="gynaecology">
        <img src="../../img/2_03.jpg" alt="" />
        <p class="title">妇科用药</p>
      </div>
      <div class="grid" @click="stomach">
        <img src="../../img/3_03.jpg" alt="" />
        <p class="title">肠胃消化</p>
      </div>
      <div class="grid" @click="breathing">
        <img src="../../img/4_03.jpg" alt="" />
        <p class="title">呼吸用药</p>
      </div>
      <div class="grid" @click="Nutrition">
        <img src="../../img/5_03.jpg" alt="" />
        <p class="title">营养补充</p>
      </div>
      <div class="grid" @click="family">
        <img src="../../img/6_03.jpg" alt="" />
        <p class="title">家庭常备</p>
      </div>
      <div class="grid" @click="earandnose">
        <img src="../../img/7_03.jpg" alt="" />
        <p class="title">耳鼻咽喉</p>
      </div>
      <div class="grid" @click="andrology">
        <img src="../../img/8_03.jpg" alt="" />
        <p class="title">男科用药</p>
      </div>
      <div class="grid" @click="orthopaedics">
        <img src="../../img/9_03.jpg" alt="" />
        <p class="title">骨科疼痛</p>
      </div>
      <div class="grid" @click="heartandbrain">
        <img src="../../img/10_03.jpg" alt="" />
        <p class="title">心脑血管</p>
      </div>
    </div>
    <!-- 问诊 -->
    <div>
      <div class="wen" @click="Prescribe">
        <div>
          <h5 style="color: black; font-size: 15px; font-weight: 600; margin-left: 5px">
            问诊开药
          </h5>
          <p class="text" style="margin-top: 5px; margin-left: 5px">
            适用于常见病、病情稳定的慢性病复诊患者
          </p>
        </div>
        <span class="li">立即问诊</span>
      </div>
    </div>
 
       <!-- 健康护肤 -->
    <div class="hufu">
      <div v-for="(item, index) in hufu" :key="index">
        <div>
          <a :href="item.jump_url">
            <img :src="item.img_url" alt="">
          </a>
        </div>
      </div>
    </div>
    <!-- 健康体检 -->
    <div class="tijian">
      <div v-for="(item, index) in tijian" :key="index">
        <div>
          <a :href="item.jump_url">
            <img :src="item.img_url" alt="">
          </a>
        </div>
      </div>

    <!-- <div>
      <div class="Skincare">
        <img src="../../img/11_03.jpg" alt="" class="hu" />
        <img src="../../img/12_03.jpg" alt="" class="fu" />
      </div>
    </div>

    <div>
      <div class="physical">
        <img src="../../img/13_03.jpg" alt="" class="ti" />
        <img src="../../img/14_03.jpg" alt="" class="ti" />
        <img src="../../img/15_03.jpg" alt="" class="ti" @click="clinical" />
      </div> -->

    </div>
    <!--列表数据 -->
    <div>
      <ShopList></ShopList>
    </div>
     <div>
      <span class="cart" @click="cart">
        <van-icon name="cart-o" class="icon1" />
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { gethufu, gettijian } from '@/request/http'
import ShopList from '../../compentents/ShopList/index.vue'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
const input = ref('')
const router = useRouter()
const cartItems = ref([]);
// 点击搜索跳转
// const search = () => {
//   router.push('/search')
// }

const hufu = ref<any>();
gethufu().then((res)=>{
  hufu.value = res.data.data.recommend_big_cards
  console.log(hufu.value,4)
})

const tijian = ref<any>();
gettijian().then((res)=>{
  tijian.value = res.data.data.recommend_small_cards;
  console.log(tijian.value,6)
})




const cart = ()=>{
  router.push('/cart')
}
const search=()=>{
  router.push('/search')
}

// 点击皮肤用药跳转
const skin = () => {
  router.push('/skin')
}

// 点击妇科用药跳转
const gynaecology = () => {
  router.push('/gynaecology')
}

// 点击肠胃消化跳转
const stomach = () => {
  router.push('/stomach')
}

// 点击呼吸用药跳转
const breathing = () => {
  router.push('/breathing')
}

// 点击营养补充跳转
const Nutrition = () => {
  router.push('/Nutrition')
}
//点击家庭常备
const family = () => {
  router.push('/family')
}
// 点击耳鼻咽喉跳转
const earandnose = () => {
  router.push('/earandnose')
}
// 点击男科用药跳转
const andrology = () => {
  router.push('/andrology')
}
// 点击骨科疼痛跳转
const orthopaedics = () => {
  router.push('/orthopaedics')
}

// 点击心脑血管跳转
const heartandbrain = () => {
  router.push('/heartandbrain')
}
//点击问诊开药跳转
const Prescribe = () => {
  router.push('/Prescribe')
}
//点击临床研究跳转
const clinical = () => {
  router.push('/clinical')
}

</script>

<style scoped lang="scss">
.search2 {
  height: 40px;
  width: 100%;
  border-radius: 20px;
}

.header {
  width: 100%;
  height: 70px;
  background-image: linear-gradient(to bottom, #64c996, #a5e0c2);
  display: flex;
  position: relative;
}
.search {
  width: 85%;
  position: relative;
  margin-top: 15px;
  margin-left: 10px;
}

// .shopping {
//   height: 30px;
//   line-height: 30px;
//   text-align: center;
//   font-size: 16px;
// }


.icon {
  position: absolute;
  top: 20px;
  right: 10px;
  color: #fff;
  font-size: 30px;
}
.btn {
  width: 60px;
  height: 30px;
  font-size: 16px;
  position: absolute;
  right: 50px;
  top: 20px;
  border-radius: 20px;
  color: #ffffff;
  border: 0;
  background: #64c996;
}
.grid-container {
  margin-top: 1px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .grid {
    width: 70px;
    height: 80px;
    text-align: center;
    .title {
      font-size: 12px;
    }
    img {
      border-radius: 50px;
    }
  }
}

.wen {
  display: flex;
  width: 80%;
  height: 50px;
  border-radius: 5px 5px 10px 5px;
  background: linear-gradient(to bottom, #e0f5ea, #fff);
  // background: red;
  margin-left: 40px;
  margin-top: 20px;
  color: #ccc;
}

.li {
  display: inline-block;
  width: 80px;
  height: 30px;
  background: #39d167;
  text-align: center;
  line-height: 30px;
  border-radius: 20px;
  color: #ffffff;
  font-size: 14px;
  margin-left: 20px;
  margin-top: 5px;
}
.text {
  font-size: 10px;
}


// 健康护肤
.hufu {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;

  img {
    width: 98%;
    height: 100%;
    margin-right: 1%;
  }
}

// 健康体检
.tijian {
  display: flex;
  width: 100%;
  height: 100%;

  img {
    width: 98%;
    height: 100%;
  }
}


.physical {
  display: flex;
  justify-content: space-around;
  .ti {
    width: 120px;
  }
}
.notice-swipe {
  height: 40px;
  line-height: 40px;
}
.lun {
  width: 100%;
  position: absolute;
  top: 0px;
  left: 10px;
  .notice {
    width: 50%;
    height: 40px;
    margin-left: 30px;
    background: #fff;
    color: #ccc;
  }
}
.cart {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50px;
  position: fixed;
  bottom: 80px;
  right: 20px;
  background: orange;
  text-align: center;
  line-height: 60px;
}
.icon1 {
  font-size: 30px;
  color: #fff;
}
</style>
